<template>
 <div class="order_containter">
   <div class="order_item">
     <el-tabs type="border-card">
       <el-tab-pane label="代付款"><table-order-item :order-list="notPayList" empty-type-name="未收款的订单数为：0"></table-order-item></el-tab-pane>
       <el-tab-pane label="待收货"><table-order-item :order-list="notReceived" empty-type-name="未收货的订单数为：0"></table-order-item></el-tab-pane>
       <el-tab-pane label="已收货"><table-order-item :order-list="received" empty-type-name="已收货的订单数为：0"></table-order-item></el-tab-pane>
     </el-tabs>
   </div>
 </div>
</template>

<script>
  import BottomBar from "../bottomBar/BottomBar";
  import TableOrderItem from "./TableOrderItem";
  export default {
    name: "OrderListItem",
    components:{
      BottomBar,
      TableOrderItem
    },

    mounted() {
      //根据传进来的orderList数组，分割成代收款，未收货， 已收货三个数据的数组
      for(let index in this.orderList){
        if(this.orderList[index].orderStatus === 0){
          this.notPayList.push(this.orderList[index]);
        }else if(this.orderList[index].orderStatus === 1){
          this.notReceived.push(this.orderList[index]);
        }else{
          this.received.push(this.orderList[index]);
        }
      }
    },

    props:{
      orderList: {},
    },

    data(){
      return{
        notPayList: [],  //未付款
        notReceived: [], //未收货
        received: [],  // 已收货
      }
    }
  }
</script>

<style scoped>
  .order_containter{
    width: 100%;
    height: 800px;
  }

  .order_item{
    width: 90%;
    margin: 50px auto;
  }
</style>
